import type { FC } from 'react';
import { View, Text } from 'react-native';
import { Space } from '@/components';
import Card from '../Card';
import User from './user';
import styles from './styles';

const users = [
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:bi3yz2gjrbyg3wllkntw3to6/bafkreidc4qbm2lisyrmbkgyhgv2aaimnyhp4noek6vsvsclzcypf6726xi@jpeg',
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:okoyo3zksunfyoqabwvepxdw/bafkreiaum472ateefy43g3ot2gjxndbdipsbuv6npgznd6pqel3nuo3pci@jpeg',
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:ekc6spxu2hxdkl3eclbtbm56/bafkreicirnk763slbf6tnqcpojzdg2c5ktghxkn2nue4su6of2b3fam67a@jpeg',
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:rfqxk4moeeaputu63rm4tfdc/bafkreiextqfu4jhdw2oqaiyyld72ufw4ciovofzxwhatrmir6ycr5vcuoq@jpeg',
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:vxkxu65awa3ocjpiqmmrxnt2/bafkreid7eny7ptmqb5wty6c5bfgmkv7xqhp73dfsp46w6263w2gzvv4api@jpeg',
  'https://cdn.bsky.app/img/avatar_thumbnail/plain/did:plc:uxosuvp6vksdhzf5ixitznej/bafkreigidchfnic7dcrpx6cknkkwtsw4r5l5q3zeu5ecb5kchlcjjokbf4@jpeg'
].map((item, i) => {
  return {
    avatar: item,
    nickName: 'test_' + (i + 1)
  }
});


const Participants: FC = () => {
  return (
    <Card>
      <View style={styles.wrapper}>
        <Text style={styles.title}>
          {users.length} Participants
        </Text>
        <Space direction="vertical">
          {users.map((item, i) => {
            return (
              <User
                key={i}
                user={item}
              />
            );
          })}
        </Space>
      </View>
    </Card>
  );
}

export default Participants;